<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	
	<form action="">
		用户名: <input id="nameId" type="text" name="name" onblur="checkName()"/>
		<span id="nameSpan1"></span>
		<span id="nameSpan2"></span>
		<br/>
		邮箱: <input type="text" id="emailId" name="email"  onblur="checkEmail()"/>
		<span id="emailSpan1"></span>
		<br/>
	</form>
	
	<script src="static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function checkName() {
			var name = $('#nameId').val();
			//console.log(name);
			// 首先用正则表达式验证符不符合规则
			// 如果符合规则，在验证用户名存不存在
			
			var reg = /\w{3,10}/;
			// if(reg.test(name) == false) {
			if(!reg.test(name)) {
				$('#nameSpan2').html('');
				$('#nameSpan1').html('请输入3-10位的字母数字下划线');
				$('#nameSpan1').css('color', 'red');
				return;
			} 
			
			$.post('${pageContext.request.contextPath}/user?method=checkExist',
					{'name' : name},
					function(jsonObj) {
						// {isExist: false}
						console.log(jsonObj);
						if(jsonObj.isExist) {// 代表已经存在
							$('#nameSpan2').html('该用户名已经存在');
							$('#nameSpan2').css('color', 'red');
						} else {
							$('#nameSpan2').css('color', 'green');
							$('#nameSpan2').html('该用户名可以使用');
						}
					},
					'json');
		}
			
		function checkEmail() {
			var email = $('#emailId').val();
			// fegfre08@gamil.com
			var reg = /[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/;
			// if(reg.test(name) == false) {
			if(!reg.test(email)) {
				$('#emailSpan1').html('请输入正确的邮箱格式');
				$('#emailSpan1').css('color', 'red');
			} else {
				$('#emailSpan1').html('邮箱格式正确');
				$('#emailSpan1').css('color', 'green');
			}
		}
	</script>
</body>
</html>